<template>
    <div class="charts-container">
      <div id="myChart1" class="chart"></div>
      <div id="myChart2" class="chart"></div>
      <div id="myChart3" class="chart"></div>
      <div id="myChart4" class="chart"></div>
      <div id="myChart5" class="chart"></div>
      <div id="myChart6" class="chart"></div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import * as echarts from "echarts";
  
  export default {
    name:'company',
    data() {
      return {};
    },
    async mounted() {
      await this.initChart1();
      await this.initChart2();
      await this.initChart3();
      await this.initChart4();
      await this.initChart5();
      await this.initChart6();
    },
    methods: {
        initChart1() {
    var mychart = echarts.init(document.getElementById('myChart1'));
    var jobNames = [];
    var jobCounts = [];

    return axios.get("http://localhost:8081/echarts/echarts/filteredCompanyStats")
        .then(function (res) {
            var response = res.data.res;
            for (var i = 0; i < response.length; i++) {
                jobNames.push(response[i].job_title);
                jobCounts.push(response[i].count);
            }

            // 使用固定的最大值，例如 10 或者根据数据动态计算最大值
            var maxCount = Math.max(...jobCounts) + 1; // 可以适当加大max值以确保图形展示得更清晰

            mychart.setOption({
                title: { text: '各岗位招聘人数', left: 'center' },
                tooltip: {},
                radar: {
                    // 设置 indicator，确保每个岗位对应的最大值一致
                    indicator: jobNames.map((job, index) => ({
                        name: job, 
                        max: maxCount // 固定一个最大值，确保显示正常
                    })),
                    center: ['50%', '50%'],
                    radius: '60%',
                },
                series: [{
                    name: '招聘人数',
                    type: 'radar',
                    data: [{
                        value: jobCounts, // 与 indicator 一一对应
                        name: '招聘人数'
                    }],
                    itemStyle: { color: '#4CAF50' },
                    lineStyle: { width: 2 }
                }]
            });
        })
        .catch(function (error) {
            console.error('请求失败:', error);
            alert('获取“各岗位招聘人数”数据失败，请稍后重试。');
        });
}
,
  
initChart2() {
    var mychart = echarts.init(document.getElementById('myChart2'));
    var data = [];
    return axios.get("http://localhost:8081/echarts/echarts/filteredEducationStats")
        .then(function (res) {
            // 这里应该访问 educationStats
            var response = res.data.educationStats;
            var jobName = response.map(item => item.job_title);

            // 根据 avg 排序
            for (var i = 0; i < response.length; i++) {
                var d = { name: '', value: 0 };
                d.name = response[i].job_title;
                d.value = response[i].avg;
                data.push(d);
            }

            // 按照 value 对数据进行升序排序
            data.sort((a, b) => a.value - b.value);

            // 设置 ECharts 配置
            mychart.setOption({
                title: { text: '各岗位薪资分布', left: 'center' },
                tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
                legend: { left: 'center', top: 'bottom', data: jobName },
                series: [{
                    name: 'Radius Mode',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    label: { show: true, position: 'outside' },
                    labelLine: { show: true },
                    data: data
                }]
            });
        })
        .catch(function (error) {
            console.error('请求失败:', error);
            alert('获取“各岗位薪资分布”数据失败，请稍后重试。');
        });
}
,
  
      initChart3() {
        var mychart = echarts.init(document.getElementById('myChart3'));
        axios.get("http://localhost:8081/echarts/echarts/filteredJobViewApplyStats")
          .then(function (res) {
            const response = res.data.jobStats;
            const jobNames = response.map(item => item.job_Title);
            const viewCounts = response.map(item => item.view_Count);
            const applyCounts = response.map(item => item.apply_Count);
  
            mychart.setOption({
              title: { text: '各岗位浏览与申请统计', left: 'center', top: '5%' },
              tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
              legend: { data: ['浏览次数', '申请次数'], top: '15%', left: 'center' },
              xAxis: { type: 'category', data: jobNames, axisLabel: { interval: 0, rotate: 45 } },
              yAxis: { type: 'value' },
              series: [
                { name: '浏览次数', type: 'bar', stack: '总量', data: viewCounts },
                { name: '申请次数', type: 'bar', stack: '总量', data: applyCounts }
              ]
            });
          })
          .catch(function (error) {
            console.error('请求失败:', error);
            alert('获取“各岗位浏览与申请统计”数据失败，请稍后重试。');
          });
      },
  
      initChart4() {
        var mychart = echarts.init(document.getElementById('myChart4'));
        var salaryRanges = [];
        var jobCounts = [];
  
        return axios.get("http://localhost:8081/echarts/echarts/filteredSalaryDistributionStats")
          .then(function (res) {
            var response = res.data.salaryStats;
            for (var i = 0; i < response.length; i++) {
              salaryRanges.push(response[i].salary_Range);
              jobCounts.push(response[i].job_Count);
            }
  
            mychart.setOption({
              title: { text: '薪资分布统计', left: 'center' },
              tooltip: {
                trigger: 'item',
                formatter: function (params) { return `${params.name}<br/>岗位数: ${params.value}`; }
              },
              angleAxis: { type: 'category', data: salaryRanges, axisLabel: { interval: 0, rotate: 45 } },
              radiusAxis: { type: 'value', min: 0, max: Math.max(...jobCounts) },
              polar: {},
              series: [{
                type: 'bar',
                data: jobCounts,
                coordinateSystem: 'polar',
                itemStyle: { color: '#FF7F50' }
              }]
            });
          })
          .catch(function (error) {
            console.error('请求失败:', error);
            alert('获取“薪资分布统计”数据失败，请稍后重试。');
          });
      },
  
      initChart5() {
    var mychart = echarts.init(document.getElementById('myChart5'));
    var companyNames = [];
    var jobCounts = [];

    return axios.get("http://localhost:8081/echarts/echarts/filteredCompanyJobStats")
        .then(function (res) {
            var response = res.data.companyJobStats;
            for (var i = 0; i < response.length; i++) {
                companyNames.push(response[i].company_Name);
                jobCounts.push(response[i].jobCount);
            }

            mychart.setOption({
                title: { text: '公司招聘岗位统计', left: 'center' },
                tooltip: { trigger: 'item', formatter: '{b}: {c} 岗位' },
                xAxis: {
                    type: 'category',
                    data: companyNames,
                    axisLabel: { rotate: 45 }
                },
                yAxis: { 
                    type: 'value', 
                    axisLabel: { formatter: '{value} 岗位' },
                    interval: 1  // 设置纵坐标刻度间隔为1
                },
                series: [{
                    name: '招聘岗位数',
                    type: 'scatter',
                    data: companyNames.map((name, index) => ({
                        name: name,
                        value: [companyNames[index], jobCounts[index]]
                    })),
                    symbolSize: 10,
                    itemStyle: { color: '#4E9E99' }
                }]
            });
        })
        .catch(function (error) {
            console.error('请求失败:', error);
            alert('获取“公司招聘岗位统计”数据失败，请稍后重试。');
        });
}
,
  
      initChart6() {
    var mychart = echarts.init(document.getElementById('myChart6'));
    var data = [];
  
    return axios.get("http://localhost:8081/echarts/echarts/filteredJobSkillStats")
        .then(function (res) {
            var response = res.data.jobSkillStats;  // 这里应该是 jobSkillStats
            response = response.filter(item => item.skill_Name && item.proficiencyLevel);
          
            // 使用岗位名和技能名称作为每个节点的名称和值
            for (var i = 0; i < response.length; i++) {
                // 如果希望展示岗位技能信息，这里使用岗位名和技能名作为键值对
                data.push({
                    name: `${response[i].job_Title} - ${response[i].skill_Name}`,
                    value: 1  // 每项数据的值可以是 1，表示一个技能
                });
            }

            mychart.setOption({
                title: { text: '岗位技能分布', left: 'center' },
                tooltip: { trigger: 'item', formatter: '{b}: {c} 技能' },
                series: [{
                    name: '岗位技能分布',
                    type: 'treemap',
                    data: data,
                    label: { show: true },
                    itemStyle: { borderColor: '#ffffff' }
                }]
            });
        })
        .catch(function (error) {
            console.error('请求失败:', error);
            alert('获取“岗位技能分布”数据失败，请稍后重试。');
        });
}
    }
  };
  </script>
  
  <style scoped>
  .charts-container {
    display: flex;
    flex-wrap: wrap;
  }
  .chart {
    width: 45%;
    height: 400px;
    margin: 20px;
  }
  </style>
  